
<template>
   <div>
		<div class="search">
			<input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
		</div>
		<div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">  
					{{ item.name }}  
				</li>
				<li class="search-item border-bottom" v-show="hasNoData">
				没有找到匹配数据
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	import { mapMutations } from "vuex"
    export default {
		name:"Search",
		props :{
			cities : Object
		},
		data () {
			return {
				keyword: '',	
				// hasNoData:false,
				list: [],

			}
		},
		methods : {
			// handleCityClick(city){        
			// 	this.$store.commit("changeCityValue",city)  
			// 	this.$router.push("/")             
			// }    
			handleCityClick(city){
				this.changeCityValue(city)    
				this.$router.push("/")            
			},
			...mapMutations(['changeCityValue'])  
		},
		 watch : {
			keyword (){
				if (!this.keyword) {
					this.list = []
					return
				}
				//函数节流
				if (this.timer) {
					clearTimeout(this.timer)
				}
				
				this.timer = setTimeout(()=>{
					const result = []
					for(let i in this.cities ){
						this.cities[i].forEach((value)=>{
							//如果我们能从name  spell当中搜索到 我们就把它添加到result当中
							if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword)> -1) {
								result.push(value)
							}                           
						})
					}
					this.list = result
				},100)
			}
		},
		 mounted (){
			//搜索出来内容的滚动
			this.scroll = new Bscroll(this.$refs.search)    
		},
		computed:{
			hasNoData(){
				return  !this.list.length
			}
		},

    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'	
.search
        height: .72rem
        padding: 0 .1rem
        background: $bgColor
        .search-input
            box-sizing: border-box
            width: 100%
            height: .62rem
            padding: 0 .1rem
            line-height: .62rem
            text-align: center
            border-radius: .06rem
            color: #666
    
    .search-content
        z-index: 1
        overflow: hidden
        position: absolute
        top: 1.58rem
        left: 0
        right: 0
        bottom: 0
        background: #fff
        .search-item
            line-height: .62rem
            padding-left: .2rem
            background: #fff
            color: #666

</style>